<template>
    <div class="order-pick-info">
        <div class="method body">
            <div class="header">选择取餐方式</div>
            <div class="section row">
                <div
                    class="item"
                    :class="{ 'item-active': pickMethod === method.name }"
                    v-for="(method, index) in methodList"
                    :key="index"
                    @click="changePickMethod(method)"
                >
                    {{ method.text }}
                </div>
            </div>
        </div>

        <!-- <div class="time body">
            <div class="header">选择取餐时间</div>
            <div class="section row">
                <div
                    class="item"
                    :class="{ 'item-active': pickTime === timeItem.name }"
                    v-for="(timeItem, index) in timeList"
                    :key="index"
                    @click="changePickTime(timeItem)"
                >
                    {{ timeItem.text }}
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            pickMethod: "arrival",
            pickTime: "immediate",

            methodList: [
                { text: "堂食", name: "arrival" },
                { text: "外带", name: "take" },
                { text: "店外取餐", name: "take_outside" }
            ],
            timeList: [
                { text: "现在取餐", name: "immediate" },
                { text: "稍后取餐", name: "10" }
            ]
        };
    },

    methods: {
        changePickMethod(item) {
            this.pickMethod = item.name;
            this.$emit("change-method", item);
        },
        changePickTime(item) {
            this.pickTime = item.name;
            this.$emit("change-time", item);
        }
    }
};
</script>


<style lang="less" scoped>
.order-pick-info {
    font-size: 28px;
    .body {
        background: #fff;
        padding: 0 30px 30px 30px;
        margin-bottom: 20px;

        .header {
            padding: 20px 0 30px 0;
        }

        .section {
            justify-content: space-around;
            .item {
                flex: 1 1 auto;
                border: 3px solid #b9b9b9;
                border-radius: 10px;
                text-align: center;
                margin: 0 10px;
                padding: 20px 0;
                color: #aaa;
            }
            .item-active {
                border-color: #ffc031;
                border-width: 3px;
                color: #000;
            }
        }
    }
}
</style>